<script setup>
import { onMounted, ref,  reactive } from 'vue';
import { orderSettingApi, updateOrderSettingApi } from'@/apis/oms/setting';

const form = ref({});
const ruleFormRef = ref()
const submitForm = () => {
    if (!ruleFormRef.value) return
    ruleFormRef.value.validate((valid) => {
        if (valid) {
            updateOrderSettingApi(form.value).then(res=>{
                ElMessage({
                    message: '修改成功',
                    type: 'success',
                })
            })
        } else {
            return false
        }
    })
}


const rules = reactive({
    flashOrderOvertime: [
        { required: true, message: '请输入秒杀订单超过时间', trigger: 'blur'},
    ],
    normalOrderOvertime: [
        { required: true, message: '请输入正常订单超过时间', trigger: 'blur'},
    ],
    confirmOvertime: [
        { required: true, message: '请输入订单自动完成时间', trigger: 'blur'},
    ],
    finishOvertime: [
        { required: true, message: '请输入自动结束交易时间', trigger: 'blur'},
    ],
    commentOvertime: [
        { required: true, message: '请输入自动好评时间', trigger: 'blur'},
    ],
})

const loading = ref(false)
const orderSetting = async() => {
    loading.value = true
    const res = await orderSettingApi()
    form.value = res.data
    loading.value = false
}

onMounted(() => orderSetting())
</script>

<template>
    <div class="container" style="display: flex;justify-content: center;width: 100%;" v-loading="loading">
        <el-form label-position="right" :model="form" style="width: 40%;" label-width="160" ref="ruleFormRef" :rules="rules">
            <el-form-item label="秒杀订单超过：" prop="flashOrderOvertime">
                <div style="display: flex;justify-content: space-between;width: 100%;">
                    <el-input v-model="form.flashOrderOvertime"><template #append>分</template></el-input>
                    <div  style="width: 240px;margin-left: 10px;">未付款，订单自动关闭</div>
                </div>
                
            </el-form-item>
            <el-form-item label="正常订单超过：" prop="normalOrderOvertime">
                <div style="display: flex;justify-content: space-between;width: 100%;">
                    <el-input v-model="form.normalOrderOvertime"><template #append>分</template></el-input>
                    <div  style="width: 240px;margin-left: 10px;">未付款，订单自动关闭</div>
                </div>
            </el-form-item>
            <el-form-item label="发货超过：" prop="confirmOvertime">
                <div style="display: flex;justify-content: space-between;width: 100%;">
                    <el-input v-model="form.confirmOvertime"><template #append>天</template></el-input>
                    <div  style="width: 240px;margin-left: 10px;">未收货，订单自动完成</div>
                </div>
            </el-form-item>
            <el-form-item label="订单完成超过：" prop="finishOvertime">
                <div style="display: flex;justify-content: space-between;width: 100%;">
                    <el-input v-model="form.finishOvertime"><template #append>天</template></el-input>
                    <div  style="width: 240px;margin-left: 10px;">自动结束交易</div>
                </div>
            </el-form-item>
            <el-form-item label="订单完成超过：" prop="commentOvertime">
                <div style="display: flex;justify-content: space-between;width: 100%;">
                    <el-input v-model="form.commentOvertime"><template #append>天</template></el-input>
                    <div  style="width: 240px;margin-left: 10px;">自动好评</div>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm()">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<style scoped lang='scss'>

</style>